<template>
    <div class="makeGroup">
        <div class="topImg"></div>
        <div class="list">
            <ul>
                <li>
                    <div class="imgPosition">
                        <img src="../../assets/119img/pt_02.png" alt="">
                    </div>
                    <div class="goodsList">
                        <div class="goodsImg">
                            <img src="" alt="">
                        </div>
                        <div class="goodsInfo">
                            <p class="name">茶碱缓释片(舒弗美)</p>
                            <p class="price">会员价：￥5.50</p>
                            <p class="piece">规格：0.5g*12片*3板</p>
                            <p class="factory">厂家：江中药业股份有限公司</p>
                            <p class="date">效期：2022-03-31</p>
                            <div class="flex">
                                <div class="total">
                                    <div class="leftNum">拼团单人购买量</div>
                                    <div class="rightStock">60盒</div>
                                </div>
                                <p class="totalNum">总量：7140</p>
                            </div>
                        </div>
                    </div>
                    <!-- 即将开始 -->
                    <div class="btnBar common" v-show="false">
                      <div class="priceAll">
                          <p class="oldPrice">原价：￥330.00</p>
                          <p class="nowPrice">拼团价:<span>￥330.00</span></p>
                      </div>
                      <div class="timeBar">
                          <p class="time">距开始16:20:36</p>
                          <p class="once">即将开始</p>
                      </div>
                    </div>
                    <!-- 立即拼团 -->
                    <div class="onceBar common" v-show="false">
                      <div class="groupLine">
                        <div class="leftgroup">第1团成功</div>
                        <div class="rightgroup">正在拼团（90/119）</div>
                      </div>
                      <div class="flex">
                        <div class="priceAll">
                          <p class="oldPrice">原价：￥330.00</p>
                          <p class="nowPrice">拼团价:<span>￥330.00</span></p>
                        </div>
                        <div class="timeBar">
                          <p class="time">距结束16:20:36</p>
                          <p class="once">立即拼团</p>
                        </div>
                      </div>
                    </div>
                    <!-- 已参与拼团 -->
                    <div class="onceBar common" v-show="false">
                      <div class="groupLine">
                        <div class="leftgroup">第1团成功</div>
                        <div class="rightgroup">正在拼团（90/119）</div>
                      </div>
                      <div class="flex">
                        <div class="priceAll">
                          <p class="oldPrice">原价：￥330.00</p>
                          <p class="nowPrice">拼团价:<span>￥330.00</span></p>
                        </div>
                        <div class="timeBar">
                          <p class="time">距结束16:20:36</p>
                          <p class="once">已参与拼团</p>
                        </div>
                      </div>
                    </div>
                    <!-- 已拼完 -->
                    <div class="onceBar common fail" v-show="false">
                      <div class="groupLine">
                        <div class="leftgroup">第1团成功</div>
                        <div class="rightgroup">拼团失败（90/119）</div>
                      </div>
                      <div class="flex">
                        <div class="priceAll">
                          <p class="oldPrice">原价：￥330.00</p>
                          <p class="nowPrice">拼团价:<span>￥330.00</span></p>
                        </div>
                        <div class="timeBar">
                          <p class="once">已拼完</p>
                        </div>
                      </div>
                    </div>
                    <!-- 无法参与 -->
                    <div class="btnBar common unable">
                      <div class="priceAll">
                          <p class="oldPrice">原价：￥330.00</p>
                          <p class="nowPrice">拼团价:<span>￥330.00</span></p>
                      </div>
                      <div class="timeBar">
                          <p class="time">距开始16:20:36</p>
                          <p class="once">无法参与</p>
                          <div class="tips">
                            <div class="triangle"></div>
                            <div class="info">暂无西药资质，请联系客服</div>
                          </div>
                      </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.makeGroup {
  width: 100%;
  background-color: #da3e45;
  .topImg {
    width: 100%;
    height: 654px;
    background: url("../../assets/119img/pt_01.png") no-repeat center;
    background-size: 100% 100%;
  }
  .list {
    ul {
      width: 710px;
      margin: 0 auto;
      li {
        width: 661px;
        height: 372px;
        background: #ffffff;
        box-shadow: 0px 3px 8px 0px rgba(124, 0, 9, 0.6);
        border-radius: 4px;
        position: relative;
        padding: 28px 20px 20px 29px;
        background-size: 100% 100%;
        .imgPosition {
          position: absolute;
          left: -7px;
          top: 7px;
          img {
            width: 172px;
            height: 50px;
          }
        }
        .goodsList {
          display: flex;
          justify-content: space-between;
          .goodsImg {
            margin-right: 15px;
            img {
              width: 221px;
              height: 221px;
              img {
                width: 221px;
                height: 221px;
              }
            }
          }
          .goodsInfo {
            width: 425px;
            font-size: 20px;
            font-weight: 400;
            color: #666666;
            .name {
              color: #333;
              font-size: 28px;
              font-weight: bold;
              margin-bottom: 29px;
            }
            .piece {
              margin: 13px 0;
            }
            .factory {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .date {
              margin: 14px 0 15px;
            }
            .flex {
              display: flex;
              align-items: center;
              .total {
                width: 260px;
                height: 42px;
                background: #e8464e;
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .leftNum {
                  color: #fff;
                  font-size: 20px;
                  width: 161px;
                  text-align: center;
                }
                .rightStock {
                  margin-right: 1px;
                  width: 99px;
                  text-align: center;
                  font-size: 28px;
                  height: 38px;
                  line-height: 38px;
                  color: #e8464e;
                  font-weight: bold;
                  background-color: #fff;
                }
              }
              .totalNum {
                font-size: 24px;
                color: #d613f1;
                margin-left: 17px;
              }
            }
          }
        }
        .common {
          .groupLine {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            .leftgroup {
              width: 132px;
              height: 38px;
              background-size: 100% 100%;
              background: url("../../assets/119img/pt_03.png") no-repeat center;
              font-size: 20px;
              color: #fff;
              text-align: center;
              line-height: 38px;
              border-radius: 4px;
            }
            .rightgroup {
              width: 223px;
              height: 38px;
              background-size: 100% 100%;
              background: url("../../assets/119img/pt_04.png") no-repeat center;
              color: #fff;
              font-size: 20px;
              text-align: center;
              line-height: 38px;
            }
          }
          .priceAll {
            .oldPrice {
              font-size: 24px;
              font-weight: 400;
              color: #999999;
            }
            .nowPrice {
              margin-top: 10px;
              font-size: 32px;
              font-weight: 400;
              color: #e8464e;
              span {
                font-size: 32px;
                font-weight: bold;
              }
            }
          }
          .timeBar {
            width: 335px;
            height: 64px;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .time {
              font-size: 20px;
              font-weight: 400;
              text-align: center;
              width: 175px;
            }
            .once {
              line-height: 64px;
              width: 160px;
              height: 64px;
              border-radius: 4px;
              font-size: 24px;
              font-weight: 400;
              text-align: center;
            }
          }
        }
        .btnBar {
          margin-top: 48px;
          display: flex;
          justify-content: space-between;
          .timeBar {
            border: 1px solid #c1333a;
            .time {
              color: #c1333a;
            }
            .once {
              background: #c1333a;
              color: #e8c2c3;
            }
          }
        }
        .onceBar {
          .groupLine {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            .leftgroup {
              width: 132px;
              height: 38px;
              background-size: 100% 100%;
              background: url("../../assets/119img/pt_02.png") no-repeat center;
              font-size: 20px;
              color: #fff;
              text-align: center;
              line-height: 38px;
              border-radius: 4px;
            }
            .rightgroup {
              width: 223px;
              height: 38px;
              background-size: 100% 100%;
              background: url("../../assets/119img/pt_04.png") no-repeat center;
              color: #fff;
              font-size: 20px;
              text-align: center;
              line-height: 38px;
            }
          }
          .flex {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            .timeBar {
              border: 1px solid #d50fff;
              color: #d50fff;
              .once {
                background: url("../../assets/119img/pt_03.png") no-repeat
                  center;
                color: #fff;
              }
            }
          }
        }
        .fail {
          .groupLine {
            .rightgroup {
              background: #b6b6b6;
              border-radius: 4px;
            }
          }
          .flex {
            .timeBar {
              border: none;
              width: 160px;
              .once {
                height: 64px;
                background: #b6b6b6;
                border-radius: 4px;
              }
            }
          }
        }
        .unable {
          .timeBar {
            position: relative;
            .tips {
              position: absolute;
              top: 83px;
              right: 0;
              min-width:380px;
              .triangle{
                position: absolute;
                top: -16px;
                right: 40px;
                width: 29px;
                height: 16px;
                background: url('../../assets/119img/pt_06.png') no-repeat center;
                background-size: 100% 100%;
              }
              .info{
                height: 75px;
                line-height: 75px;
                min-width:380px;
                background: #FFFFFF;
                box-shadow: 0px 3px 8px 0px rgba(124, 0, 9, 0.6);
                border-radius: 4px;
                text-align: center;
                font-size: 24px;
                color: #C1333A;
              }
            }
          }
        }
      }
    }
  }
}
</style>